<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../modules/js/common.js"></script>
</head>
<body>

<div id="item" class="carousel">
        <h1>商品详情</h1><br>
        商品编号:<span id="id"></span><br><br>
        商品名称:<span id="name"></span><br><br>
        商品类型:<span id="type"></span><br><br>
        <span id="image"></span><br><br>
        商品价格:<span id="price"></span><br><br>
        卖   点:<span id="sellPoint"></span><br><br>
        数   量:<span id="number"></span><br><br>
    <span><button onclick="toBuy()">购买</button></span>
    <span><button onclick="toCar()">加入购物车</button></span>
    <span><button onclick="window.location.href='http://localhost:8080'">返回</button></span>
</div>

<script>
    $(function (){
        $.ajax({
            url:"http://localhost:8080/item/"+$.cookie("itemId"),
            crossDomain:true,
            xhrFields: {withCredentials:true},
            success(result){
                $("#id").append(result.data.id)
                $("#name").append(result.data.name);
                $("#type").append(result.data.type);
                $("#price").append((result.data.price)*0.01);
                $("#image").append(`<image src="${result.data.image}">`);
                $("#sellPoint").append(result.data.sellPoint);
                $("#number").html(result.data.number);
            }
        })

    })

    function toBuy(){
        $.cookie("buyId",document.getElementById("id").innerHTML,{path:'/'});
        window.location.href="http://localhost:8080/buy/buy.html";
    }

    function toCar(){
        let username=$.cookie("username");
        let itemId=$.cookie("itemId");
        if(username==null){
            alert("请先登录");
            return;
        }
        $.ajax({
            method:"post",
            url:`http://localhost:8080/itemCar/${username}/${itemId}`,
            success(result) {
                if(result.state==1){
                    alert("加入购物车成功");
                }else {
                    alert("加入购物车失败");
                }
            }
        })
    }
</script>
</body>
</html>